<template>
	<!-- 商品详情 -->
	<view class="goods-info flex_start_center" @tap="toDetailPage">
		<view class="left">
			<image :src="goodsInfo.pic?goodsInfo.pic:goodsInfo.image" mode=""
				style="width: 200rpx;height: 200rpx;border-radius: 16rpx;"></image>
		</view>
		<view class="right flex-1">
			<view class="title u-line-2">
				{{goodsInfo.prodName?goodsInfo.prodName:goodsInfo.name}}
			</view>
			<view class="price-wp" v-if="goodsInfo.price">
				￥ {{goodsInfo.price}}{{goodsInfo.units?`/${goodsInfo.units}`:''}}
			</view>
			<view class="sell">
				<view class="avatar" v-if="goodsInfo.shopHead">
					<u--image shape="circle" :src="goodsInfo.shopHead" width="48rpx" height="48rpx"></u--image>
				</view>
				<view class="sell-name">
					{{goodsInfo.shopUser}}
				</view>
				<view class="friend-tag" v-if="goodsInfo.buddy==1">好友</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			goodsInfo: {
				type: Object,
				required: true
			},
			// 是否允许跳转商品详情
			canToDetail: {
				type: Boolean,
				default: false
			},
			openId: {
				type: String,
				default: ''
			}
		},
		methods: {
			toDetailPage() {
				if (!this.canToDetail) {
					return
				}
				this.$goToPage(
					`/pagesMall/mallCenter/mallCenterDetail?id=${this.goodsInfo.id}&openId=${this.openId}&fromGiftDetail=1`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-info {
		height: 248rpx;
		background-color: #fff;
		margin: 24rpx 32rpx;

		padding: 24rpx;
		border-radius: 16rpx;

		.right {
			margin-left: 24rpx;

			.title {
				width: 412rpx;
				height: 80rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #1D2129;
				line-height: 45rpx;

			}

			.price-wp {
				margin-top: 16rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #FF3131;
				line-height: 50rpx;

			}

			.sell {
				margin-top: 16rpx;
				height: 64rpx;
				display: flex;
				align-items: center;

				.avatar {
					margin-right: 16rpx;
				}

				.sell-name {
					margin-right: 16rpx;
					height: 48rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 48rpx;


				}

				.friend-tag {
					text-align: center;
					display: inline-block;
					width: 80rpx;
					height: 34rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 34rpx;
					border: 1rpx solid #E5E6EB;
					border-radius: 6rpx;


				}

			}

		}


	}
</style>